<template>
  <div class="flex h-screen bg-gray-100">
    <!-- 左侧导航栏 -->
    <div class="w-20 bg-gray-900 flex flex-col items-center py-4">
      <!-- 用户头像 -->
      <div class="relative group">
        <img :src="userStore.userInfo?.avatar || '/src/assets/images/default_avatar.png'"
          class="w-12 h-12 rounded-full cursor-pointer object-cover border-2 border-transparent group-hover:border-white transition-all"
          @click="showUserPanel = true" />
        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-900"></div>
      </div>

      <!-- 导航菜单 -->
      <nav class="flex-1 mt-8 space-y-6">
        <router-link to="/chat"
          class="w-12 h-12 rounded-xl bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors flex items-center justify-center"
          :class="{ 'text-white bg-gray-700': $route.path.startsWith('/chat') }">
          <el-icon :size="24">
            <ChatDotRound />
          </el-icon>
        </router-link>
        <div class="relative">
          <router-link to="/contacts"
            class="w-12 h-12 rounded-xl bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors flex items-center justify-center"
            :class="{ 'text-white bg-gray-700': $route.path.startsWith('/contacts') }">
            <el-icon :size="24">
              <UserFilled />
            </el-icon>
          </router-link>
          <el-badge v-if="contactStore.unreadCount > 0" :value="contactStore.unreadCount"
            class="absolute -top-2 -right-2" />
        </div>
        <button
          class="w-12 h-12 rounded-xl bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors flex items-center justify-center">
          <el-icon :size="24">
            <HelpFilled />
          </el-icon>
        </button>
      </nav>

      <!-- 设置按钮 -->
      <div class="mt-auto">
        <button @click="showSettingsPanel = true"
          class="w-12 h-12 rounded-xl bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors flex items-center justify-center">
          <el-icon :size="24">
            <Setting />
          </el-icon>
        </button>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="flex-1">
      <router-view></router-view>
    </div>

    <!-- 用户面板 -->
    <el-drawer v-model="showUserPanel" title="个人中心" size="400px" :with-header="false" direction="rtl">
      <div class="h-full bg-white">
        <!-- 顶部背景和头像 -->
        <div class="relative h-48 bg-gradient-to-r from-blue-500 to-purple-500">
          <div class="absolute left-1/2 transform -translate-x-1/2 -bottom-16">
            <div class="relative group">
              <img :src="userStore.userInfo?.avatar || '/src/assets/images/default_avatar.png'"
                class="w-32 h-32 rounded-full border-4 border-white object-cover shadow-lg" />
              <div
                class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-full opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
                @click="showAvatarUploader = true">
                <el-icon :size="24" class="text-white">
                  <Upload />
                </el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 头像上传组件 -->
        <AvatarUploader v-model="showAvatarUploader" @success="handleAvatarSuccess" />

        <!-- 用户信息 -->
        <div class="mt-20 px-6">
          <div class="text-center mb-6">
            <h2 class="text-xl font-semibold text-gray-800">{{ userStore.userInfo?.nickname }}</h2>
            <p class="text-gray-500 mt-1">@{{ userStore.userInfo?.username }}</p>
          </div>

          <!-- 信息编辑区 -->
          <div class="space-y-6">
            <!-- 昵称 -->
            <div class="flex items-center justify-between">
              <span class="text-gray-600">昵称</span>
              <div class="flex items-center space-x-2">
                <span class="text-gray-800">{{ userStore.userInfo?.nickname }}</span>
                <el-icon class="text-gray-400 cursor-pointer hover:text-gray-600">
                  <Edit />
                </el-icon>
              </div>
            </div>

            <!-- 邮箱 -->
            <div class="flex items-center justify-between">
              <span class="text-gray-600">邮箱</span>
              <span class="text-gray-800">{{ userStore.userInfo?.email }}</span>
            </div>

            <!-- 账号安全 -->
            <div class="pt-6 border-t">
              <h3 class="text-lg font-medium text-gray-900 mb-4">账号安全</h3>
              <button
                class="w-full py-3 px-4 rounded-xl border border-gray-200 text-left text-gray-700 hover:bg-gray-50 transition-colors flex items-center justify-between">
                <span>修改密码</span>
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </button>
            </div>

            <!-- 主题设置 -->
            <div class="pt-6 border-t">
              <h3 class="text-lg font-medium text-gray-900 mb-4">主题设置</h3>
              <div class="flex items-center justify-between">
                <span class="text-gray-600">深色模式</span>
                <el-switch v-model="isDarkMode" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 设置面板 -->
    <SettingsPanel v-model="showSettingsPanel" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/useUserStore'
import { useContactStore } from '@/stores/useContactStore'
import { useChatStore } from '@/stores/useChatStore'
import AvatarUploader from '@/components/AvatarUploader.vue'
import {
  ChatDotRound,
  UserFilled,
  HelpFilled,
  Setting,
  Upload,
  Edit,
  ArrowRight
} from '@element-plus/icons-vue'
import SettingsPanel from '@/components/SettingsPanel.vue'

const userStore = useUserStore()
const contactStore = useContactStore()
const chatStore = useChatStore()
const showUserPanel = ref(false)
const isDarkMode = ref(false)
const showAvatarUploader = ref(false)
const showSettingsPanel = ref(false)

onMounted(() => {
  contactStore.fetchUnreadCount() // 获取未读好友请求数量
  contactStore.initWebSocket() // 初始化好友相关的WebSocket监听
  chatStore.initWebSocket() // 初始化聊天相关的WebSocket监听
})

onUnmounted(() => {
  contactStore.cleanupWebSocket() // 清理好友相关的WebSocket监听
  chatStore.cleanupWebSocket() // 清理聊天相关的WebSocket监听
})

// 处理头像上传成功
const handleAvatarSuccess = async (url: string) => {
  try {
    await userStore.updateUserInfo({
      avatar: url
    })
    ElMessage.success('头像更新成功')
  } catch (error: any) {
    ElMessage.error(error.message || '更新头像失败')
  }
}

</script>